<template>
    <div>
         <div>
            <!-- 搜索表单区域 -->
            <common-form ref="searchRoleFormRef" inline :form="searchForm" :formLabel="searchFormLabel" :lableWidth="lableWidth">
                <el-button type="primary" icon="el-icon-search" size="mini">搜索</el-button>
                <el-button  icon="el-icon-refresh" size="mini">重置</el-button>
            </common-form>
            <div >
                <el-button type="primary" icon="el-icon-plus" size="mini" @click="addDialog()">新增</el-button>
                <!-- 导出 excel 表格 -->
                <el-popover
                  placement="top"
                  width="200"
                  style="margin-left:10px;">
                  <p style="font-size:13px;"><i class="el-icon-s-opportunity" style="color: green;"></i> 请选择你所需要导出的类型！</p>
                  <div style="text-align: right; margin: 0">
                      <export-excel Type="info" :excelData="allSelection" :excelTitle="excelTitle" :excelHeader="excelHeader" :excelVal="excelVal">全部</export-excel>
                      <export-excel Type="success" :excelData="multipleSelection" :excelTitle="excelTitle" :excelHeader="excelHeader" :excelVal="excelVal">选中项</export-excel>
                  </div>
                  <el-button slot="reference" type="warning" size="mini" icon="el-icon-s-data" @click="exlAll()">EXCEL</el-button>
                </el-popover>
            </div>
            <!-- 表格区域 -->
            <!-- <common-table
              :tableData="roleTable" :tableLabel="roleTableLabel" :config="config"
              @edit="editDialog" @del="delRole">
            </common-table> -->
            <el-table
              :data="roleTable"
              style="width: 100%">
              <el-table-column type="selection" width="55">
              </el-table-column>
              <el-table-column type="expand">
                <template slot-scope="scope">
                  <div>
                    <!-- {{scope.row.permissions}} -->
                    <el-tag v-for="item in scope.row.permissions" :key="item.permissionId" closable style="margin: 2px 3px;">{{item.name}}</el-tag>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="name" label="角色名称">
              </el-table-column>
              <el-table-column label="角色字符">
                <template slot-scope="scope">
                    <el-tag
                      type="success"
                      effect="plain">
                        {{scope.row.string}}
                    </el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="description" label="角色描述">
              </el-table-column>
              <el-table-column  label="状态">
                <template slot-scope="scope">
                  <el-switch  v-model="scope.row.status" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
                </template>
              </el-table-column>
              <el-table-column prop="createTime" label="创建日期">
              </el-table-column>
              <el-table-column>
                <template slot-scope="scope" >
                    <el-button type="text" icon="el-icon-view" size="mini" >详细</el-button>
                    <el-button type="text" icon="el-icon-edit" size="mini" @click="editDialog(scope.row)">编辑</el-button>
                    <el-button type="text" icon="el-icon-delete" size="mini" @click="delRole(scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>

            <!-- Dialog区域 -->
            <el-dialog
              :title="dialogTitle" width="30%"
              :visible.sync="dialogFormVisible"
              @close="closeDialog">
              <el-form  label-width="80px"
                :model="dialogForm" :rules="dialogRules" ref="dialogFormRef">
                <p style="padding:0 0 0 85px;color:orange;">name必须以ROLE_开头</p>
                <el-form-item label="角色名称" prop="name">
                  <el-input v-model="dialogForm.name" autocomplete="off" placeholder="请输入角色名称" :disabled="ban"></el-input>
                </el-form-item>
                <el-form-item label="角色描述" prop="description">
                  <el-input v-model="dialogForm.description" autocomplete="off" placeholder="请输入角色描述"></el-input>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button v-show="dialogTitle === '添加角色'" type="primary" @click="addRole()">添 加</el-button>
                <el-button v-show="dialogTitle === '编辑角色'" type="primary" @click="editRole()">修 改</el-button>
              </div>
            </el-dialog>

        </div>
    </div>
</template>

<script>
import CommonForm from '../../components/CommonForm'
// import CommonTable from '../../components/CommonTable'
import ExportExcel from '../../components/ExportExcel'
export default {
  components: {
    CommonForm,
    // CommonTable,
    ExportExcel
  },
  data () {
    return {
      // 表单字段宽度
      lableWidth: '80',
      // 搜索表单
      searchForm: {
        name: '', // 角色名
        status: '',
        date: ''
      },
      // 搜索表单label
      searchFormLabel: [
        {
          model: 'name',
          label: '角色名称',
          type: 'input'
        },
        {
          model: 'status',
          label: '状态',
          type: 'select',
          opts: [
            {
              value: '',
              label: '全部'
            },
            {
              value: 1,
              label: '可用'
            },
            {
              value: 0,
              label: '禁用'
            }
          ]
        },
        {
          model: 'date',
          label: '时间',
          type: 'date'
        }
      ],
      // 角色数据
      roleTable: [],
      // 角色数据label
      roleTableLabel: [
        {
          prop: 'name',
          label: '角色名称',
          type: ''
        },
        {
          prop: 'string',
          label: '角色字符',
          type: 'textTag'
        },
        {
          prop: 'description',
          label: '角色描述',
          type: ''
        },
        {
          prop: 'status',
          label: '状态',
          type: 'switch'
        },
        {
          prop: 'createTime',
          label: '创建日期'
        }
      ],
      // table配置对象
      config: {
        loading: false,
        current: 0,
        size: 0,
        total: 0,
        btn: [
          {
            type: ''
          },
          {
            type: 'edit'
          },
          {
            type: 'delete'
          }
        ]
      },
      // dialog控制显示
      dialogFormVisible: false,
      dialogTitle: '',
      dialogForm: {
        id: '',
        name: '',
        description: ''
      },
      ban: false,
      dialogRules: {
        name: [
          { required: true, message: '请输入角色名称', trigger: 'blur' }
        ],
        description: [
          { required: true, message: '请输入角色描述', trigger: 'blur' }
        ]
      },
      // 选中表格数据返回数组
      multipleSelection: [],
      // 导出表格的所有数据缓存
      allSelection: [],
      // 自定义导出 excel 表头
      excelHeader: ['用户名', '密码', '年龄', '性别', '邮箱', '电话', '账号状态', '注册日期', '更改日期'],
      // 自定义导出 excel 字段
      excelVal: ['username', 'password', 'age', 'sexLabel', 'email', 'phone', 'statusLabel', 'createTime', 'updateTime'],
      // 自定义导出 excel 文件名
      excelTitle: '角色列表'
    }
  },
  methods: {
    // 获取角色列表
    async getRoleList () {
      this.loading = false
      const { data: res } = await this.$http.get('/role/all')
      // console.log('角色列表', res)
      if (res.code !== 200) {
        this.loading = true
        return this.$message.error('获取权限列表失败！')
      }
      this.roleTable = res.data.map(item => {
        // 权限
        item.role.permissions = item.permissions
        item.role.status = true
        if (item.role.id === 1) {
          item.role.string = 'admin'
        } else if (item.role.id === 2) {
          item.role.string = 'commom'
        } else {
          item.role.string = 'test'
        }
        return item.role
      })
      this.loading = false
      console.log('角色列表', this.roleTable)

      this.config.total = this.roleTable.length
    },
    // 打开添加角色dialog
    addDialog () {
      this.ban = false
      this.dialogForm.name = this.dialogForm.description = ''
      this.dialogTitle = '添加角色'
      this.dialogFormVisible = true
    },
    // 添加一个角色
    addRole () {
      this.$refs.dialogFormRef.validate(async (valid) => {
        if (valid) {
          const { data: res } = await this.$http.post('/role/insert', this.dialogForm)
          console.log('添加角色', res)
          if (res.code !== 200) {
            return this.$message.error('添加角色失败！')
          }
          this.$message.success('添加角色成功！')
          this.getRoleList()
          this.dialogFormVisible = false
        }
      })
    },
    // 编辑角色，打开对话框
    editDialog (row) {
      this.ban = true
      this.dialogTitle = '编辑角色'
      this.dialogForm.id = row.id
      this.dialogForm.name = row.name
      this.dialogForm.description = row.description
      this.dialogFormVisible = true
    },
    // 修改一个角色
    editRole () {
      this.$refs.dialogFormRef.validate(async (valid) => {
        if (valid) {
          this.dialogForm.name = null
          const { data: res } = await this.$http.post('/role/update', this.dialogForm)
          // console.log('编辑角色', res)
          if (res.code !== 200) {
            return this.$message.error('编辑角色失败！')
          }
          this.$message.success('编辑角色成功！')
          this.getRoleList()
          this.dialogFormVisible = false
        }
      })
    },
    // 删除一个角色
    delRole (row) {
      this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const { data: res } = await this.$http.get(`/role/delete/${row.id}`)
        if (res.code !== 200) {
          return this.$message.error('删除角色失败！')
        }
        this.$message.success('删除角色成功！')
        this.getRoleList()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 关闭dialog事件
    closeDialog () {
      this.$refs.dialogFormRef.resetFields()
    }
    // // 删除权限tag
    // async closeTag (item) {
    //   console.log(item)
    //   const { data: res } = await this.$http.get(`/permission/permission-delete/${item.permissionId}`)
    //   if (res.code === 200) {
    //     this.getRoleList()
    //     return this.$message.success('权限删除成功！')
    //   }
    // }
  },
  created () {
    this.getRoleList()
  }
}
</script>

<style lang="scss" scoped>
 /deep/.el-form-item__label{
    font-weight: 700 !important;
  }
</style>
